<template>
  <up-navbar :bgColor="styleParam.bgColor" @leftClick="back()" :customStyle="{height:'100px'}">
    <template #right>
      <view></view>
    </template>
    <template #center>
      <view :style="{color: styleParam.color}">订单详情</view>
    </template>
  </up-navbar>

  <scroll-view style="height: 100vh" scroll-y="true" show-scrollbar="false" @scroll="onScroll"
               @scrolltolower="loadMore" lower-threshold="100">
    <view style="position: relative">
      <up-image src="/static/img/order-bg.jpg" width="100%" class="order-bg"></up-image>
      <view class="flex-center u-f-sm p-c-20 order-status">
        <up-image :show-loading="true" :src="orderStatus.icon" width="40rpx" height="40rpx"
                  style="margin-right: 10rpx"></up-image>
        {{ orderStatus.name }}
      </view>
      <view class="u-f-sm text-center" style="color: #fff;position:relative;">{{ orderStatus.tips }}</view>
    </view>
    <a-card :shadow="false">
      <view style="margin-bottom: 10rpx">
        北京市 北京市 东城区 法国滚滚滚
      </view>
      <view class="f-c-9 u-f-sm">
        乘凉 19923807615
      </view>
    </a-card>
    <order-item :oper="false" border>
      <template #after>
        <view class="u-f-sm btn-border" @click="toPath('/order/afterSale?id=12')">申请售后</view>
      </template>
    </order-item>
    <a-card border :shadow="false">
      <view class="u-f-sl l-40 flex-between">
        <view><span class="f-c-9">订单编号：</span>O202509121532041554</view>
        <view class="copy">复制</view>
      </view>
      <view class="u-f-sl l-40">
        <span class="f-c-9"> 下单时间：</span>2022-09-12 15:32:04
      </view>
      <view class="u-f-sl l-40">
        <span class="f-c-9"> 支付时间：</span>2022-09-12 15:32:04
      </view>
      <view class="u-f-sl l-40">
        <span class="f-c-9"> 支付方式：</span>微信支付
      </view>
    </a-card>
    <a-card :shadow="false" border>
      <view class="u-f-sl  l-40 flex-between">
        <view class="f-c-9">商品总额</view>
        <view>￥53.80</view>
      </view>
      <view class="u-f-sl l-40 flex-between">
        <view class="f-c-9">运费</view>
        <view>￥53.80</view>
      </view>
      <view class="u-f-sl l-40 flex-between">
        <view class="f-c-9">优惠券</view>
        <view>￥53.80</view>
      </view>
      <view class="u-f-sl l-40 flex-between">
        <view class="f-c-9">会员优惠</view>
        <view>￥53.80</view>
      </view>
      <view class="flex-end l-40">
        {{ orderStatus.id !== 0 ? '待付款' : '已付款'}}
        <span style="color: #ee5a12">￥100.09</span>
      </view>
    </a-card>
  </scroll-view>
</template>

<script setup>
import {computed, ref} from 'vue'
import {orderStatusArr} from "@/util/options/system";
import OrderItem from "@/order/components/order-item.vue";
import {back, toPath} from "@/util/router/router";

const styleParam = ref({
  color: '#fff',
  bgColor: 'transparent',
  scrollTop: 500
})

const orderInfo = ref({
  status: 0
})

const orderStatus = computed(() => {
  return orderStatusArr.find(item => item.id === orderInfo.value.status)
})

const onScroll = (e) => {
  // styleParam.value.scrollTop -= e.detail.scrollTop
  styleParam.value.bgColor = `rgba(255,255,255,${(e.detail.scrollTop) / 100})`
  styleParam.value.opacity = e.detail.scrollTop / 100
  styleParam.value.color = `rgba(0,0,0,${e.detail.scrollTop / 100})`
  if (e.detail.scrollTop > 100) {
    styleParam.value.bgColor = `rgba(255, 255, 255, 1)`
    styleParam.value.opacity = 1
  }
  if (e.detail.scrollTop < 10) {
    styleParam.value.color = `rgba(255, 255, 255, 1)`
  }
}

const allChecked = ref(false)
</script>

<style scoped lang="scss">
@import "~@/static/css/index.css";

.planet-bg {
  position: fixed;
  width: 100%;
  z-index: -1;
  top: 0;
  left: 0;
  background: #f4f4f4;
}

.order-bg {
  position: absolute;
}

.order-status {
  padding-top: 140rpx;
  color: #fff;
  position: relative;
}

.copy {
  background: #eee;
  font-size: 24rpx;
  padding: 1rpx 20rpx;
  border-radius: 5rpx;
  color: #666;
}

</style>